<template>
  <div>
    <el-form labelWidth="140px">
      <el-form-item label="指标属性" class="is-required">
        <el-select v-model="propertyid" placeholder="请选择" style="width:100%" v-validate="'required'"
          name="指标属性"
        >
          <el-option
            v-for="item in sxSelect"
            :key="item.hash.pname"
            :label="item.hash.pname"
            :value="item.hash.id"
          >
          </el-option>
        </el-select>
        <div class="el-form-item__error">{{ errors.first('指标属性') }}</div>
      </el-form-item>
      <el-form-item label="指标名称" class="is-required">
        <el-input v-model="nname" v-validate="'required'" name="指标名称"></el-input>
        <div class="el-form-item__error">{{ errors.first('指标名称') }}</div>
      </el-form-item>
      <el-form-item label="所属分类" class="is-required">
        <el-select v-model="nclassify" placeholder="请选择" style="width:100%" v-validate="'required'"
          name="所属分类"
        >
          <el-option
            v-for="item in flList"
            :key="item.hash.code_id"
            :label="item.hash.code_name"
            :value="item.hash.code_id"
          >
          </el-option>
        </el-select>
        <div class="el-form-item__error">{{ errors.first('所属分类') }}</div>
      </el-form-item>
      <el-form-item label="指标类型" class="is-required">
        <el-radio-group v-model="ntype">
          <el-radio label="1">加分项</el-radio>
          <el-radio label="2">扣分项</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="分值" class="is-required">
        <el-input v-model="nvalue" placeholder="上限99999" v-validate="'required'" name="分值"></el-input>
        <div class="el-form-item__error">{{ errors.first('分值') }}</div>
      </el-form-item>
      <el-form-item label="排序" class="is-required">
        <el-input v-model="ordernumber" type="number" placeholder="请输入" v-validate="'required'"
          min="0"
          name="排序"
        ></el-input>
        <div class="el-form-item__error">{{ errors.first('排序') }}</div>
      </el-form-item>
      <el-form-item label="考核单位" class="is-required">
        <el-input v-model="khdw" placeholder="请选择" style="width:84%" readonly></el-input><el-button type="primary" style="margin-left:1%" @click="showkh=true">选择</el-button>
      </el-form-item>
      <el-form-item label="考核对象" class="is-required">
        <el-input v-model="khdx" placeholder="请选择" style="width:84%" readonly></el-input><el-button type="primary" style="margin-left:1%" @click="innerVisible=true">选择</el-button>
      </el-form-item>
      <!-- <el-form-item label="协调部门">
        <el-input v-model="xtbm" placeholder="请选择" style="width:84%" readonly></el-input><el-button type="primary" style="margin-left:1%" @click="showxt=true">选择</el-button>
      </el-form-item> -->
      <el-form-item label="评分细则" class="is-required">
        <el-input
          type="textarea"
          :rows="3"
          placeholder="请输入内容"
          v-model="ntext"
          v-validate="'required'" name="评分细则"
        >
        </el-input>
        <div class="el-form-item__error">{{ errors.first('评分细则') }}</div>
      </el-form-item>
    </el-form>
    <el-dialog
      width="50%"
      title="选择考核对象"
      :visible.sync="innerVisible"
      appendToBody
    >
      <el-table
        ref="multipleTable"
        :data="dwList2"
        tooltipEffect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="hash.orgid"
          label="对象 ID"
        >
        </el-table-column> -->
        <el-table-column
          prop="hash.orgname"
          label="对象名称"
        >
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="toggleSelection()">取消选择</el-button>
        <el-button @click="innerVisible=false">提交</el-button>
      </span>
    </el-dialog>
    <el-dialog
      width="50%"
      title="选择协同部门"
      :visible.sync="showxt"
      appendToBody
    >
      <el-table
        ref="xtbm"
        :data="dwList3"
        tooltipEffect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange2"
      >
        <el-table-column
          type="selection"
          width="55"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="hash.orgid"
          label="对象 ID"
        >
        </el-table-column> -->
        <el-table-column
          prop="hash.orgname"
          label="对象名称"
        >
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="toggleSelection2()">取消选择</el-button>
        <el-button @click="showxt=false">提交</el-button>
      </span>
    </el-dialog>
    <el-dialog
      width="50%"
      title="选择考核单位"
      :visible.sync="showkh"
      appendToBody
    >
      <el-table
        ref="khdw"
        :data="dwList1"
        tooltipEffect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange3"
      >
        <el-table-column
          type="selection"
          width="55"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="hash.orgid"
          label="对象 ID"
        >
        </el-table-column> -->
        <el-table-column
          prop="hash.orgname"
          label="对象名称"
        >
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="toggleSelection3()">取消选择</el-button>
        <el-button @click="showkh=false">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ts: this.newStore(),
      queryparam: '',
      loading: true,
      innerVisible: false,
      showT: false,
      showT2: false,
      showxt: false,
      showkh: false,
      zhibiaoNum: '',
      zbType: '',
      description: '',
      ordernumber: '',
      zbtList: [],
      zbData: {},
      zbkhData: [],
      zbzrData: [],
      khdw: [],
      khdx: [],
      xtbm: [],
      sxSelect: [],
      flList: [],
      dwList1: [],
      dwList2: [],
      dwList3: [],
      ntype: '',
      nname: '',
      ntext: '',
      nvalue: '',
      assessorgid: [],
      propertyid: '',
      nclassify: '',
      orgid: [],
      teamorgid: [],
    };
  },
  created() {
    this.showNewzb();
  },
  methods: {
    reset() {
      this.nname = '';
      this.propertyid = '';
      this.nclassify = '';
      this.ntype = '';
      this.nvalue = '';
      this.ordernumber = '';
      this.ntext = '';
      this.assessorgid = [];
      this.orgid = '';
      this.teamorgid = '';
      this.khdx = [];
      this.xtbm = [];
      this.$refs.multipleTable.clearSelection();
      this.$refs.xtbm.clearSelection();
    },
    showNewzb() {
      this.khdw = [];
      this.khdx = [];
      this.xtbm = [];
      this.getdwList();
      this.getsxSelect();
      this.getflList();
    },
    newZB() {
      this.$validator.validateAll().then((result) => {
        if (result) {
          const req = {
            handle: 'B37BA078041E48C700BF5F304574952A237A726C98793736',
            nname: this.nname,
            propertyid: this.propertyid,
            nclassify: this.nclassify,
            ntype: this.ntype,
            nvalue: this.nvalue,
            ordernumber: this.ordernumber,
            ntext: this.ntext,
            assessorgid: this.assessorgid,
            orgid: this.orgid,
            teamorgid: this.teamorgid,
          };
          this.$confirm('确定提交?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            this.spost(this.ts, '/mainservlet', req).then(() => {
              this.$message({
                type: 'success',
                message: '提交成功!',
              });
              this.$emit('changeshowt');
              this.reset();
              // this.$parent.showNewzb();
              // this.$parent.getzbtList();
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            });
          });
        } else {
          this.$message.error('内容不能为空！');
          return false;
        }
      });
    },
    getflList() {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B7D59D38996D29503FD58B6E268D37EF8',
        supid: '01',
        codetype: '01',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.flList = ts.d.data.operation1;
      });
    },
    handleSelectionChange(val) {
      this.khdx = [];
      this.orgid = [];
      for (let i = 0; i < val.length; i += 1) {
        this.khdx.push(val[i].hash.orgname);
        this.orgid.push(val[i].hash.orgid);
      }
    },
    handleSelectionChange2(val) {
      this.xtbm = [];
      this.teamorgid = [];
      for (let i = 0; i < val.length; i += 1) {
        this.xtbm.push(val[i].hash.orgname);
        this.teamorgid.push(val[i].hash.orgid);
      }
    },
    handleSelectionChange3(val) {
      this.khdw = [];
      this.assessorgid = [];
      for (let i = 0; i < val.length; i += 1) {
        this.khdw.push(val[i].hash.orgname);
        this.assessorgid.push(val[i].hash.orgid);
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    toggleSelection2(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.xtbm.toggleRowSelection(row);
        });
      } else {
        this.$refs.xtbm.clearSelection();
      }
    },
    toggleSelection3(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.khdw.toggleRowSelection(row);
        });
      } else {
        this.$refs.khdw.clearSelection();
      }
    },
    getsxSelect() {
      const req = {
        handle: '04A3682CDCA57EBA0DA6C15FB2ECC84BE133DA25EC7F9F14C878125FE067FE5A',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.sxSelect = ts.d.data.operation1;
      });
    },
    getdwList() {
      const req2 = {
        handle: 'B37BA078041E48C78AD636982D7A6AC8CD3A43E9777C4E90',
        suporgid: '2',
      };
      const req3 = {
        handle: 'B37BA078041E48C78AD636982D7A6AC8CD3A43E9777C4E90',
        suporgid: '4',
      };
      const req1 = {
        handle: 'B37BA078041E48C78AD636982D7A6AC8CD3A43E9777C4E90',
        suporgid: '1',
      };
      this.spost(this.ts, '/mainservlet', req2).then((ts) => {
        this.dwList2 = ts.d.data.operation1;
      });
      this.spost(this.ts, '/mainservlet', req1).then((ts) => {
        this.dwList1 = ts.d.data.operation1;
      });
      this.spost(this.ts, '/mainservlet', req3).then((ts) => {
        this.dwList3 = ts.d.data.operation1;
      });
    },
  },
};
</script>

<style lang="stylus">
.el-form-item.is-required .el-form-item__label:before
  content: '*'
  color: #f56c6c
.el-input--suffix .el-input__inner
  font-size 13px
.el-button
  font-size 13px
.el-table th>.cell
  text-align center
.el-table .cell
  text-align center
.el-select
  width 14%
  margin-right 1%
.select_top
  width 92%
  margin 20px auto
.el-col
  padding: 20px 10px;
</style>

